<template>
  <view class="contain">
    <view
      class="card"
      v-for="(item, index) in gardenList"
      :key="index"
      @click.stop="jumpToPage(item)"
    >
      <view class="title">{{ item.parkName }}</view>
      <view class="img">
        <image :src="item.coverImage"></image>
      </view>
      <view class="info">{{ item.detailAddr }}</view>
      <view class="info">{{
        item.parkDesc ? item.parkDesc : "等待接口返回"
      }}</view>
      <view class="foot">
        <view class="price">
          <text class="num">￥{{ item.price }}</text>
          <text class="month">/{{ item.unit == "MONTH" ? "月" : "年" }}起</text>
        </view>
        <view class="btn">
          <consultBtn  :itemObj='item'/>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import consultBtn from "@/myComponents/gardern/consultBtn";
export default {
  components: {
    consultBtn,
  },

  props: {
    gardenList: {
      type: Array,
      data: () => {},
    },
  },

  data() {
    return {};
  },
  methods: {
    jumpToPage(value) {

      uni.setStorageSync('parkName',value.parkName)
      uni.navigateTo({
        url: "../../../pages/garden/detail?id=" + value.id,
      });


    },
  },
};
</script>

<style lang="scss" scoped>
.contain {
  .card {
    // width: 690rpx;
    // height: 534rpx;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(234, 234, 234, 1);
    border-radius: 10px;
    // margin-left: 30rpx;
    margin-top: 30rpx;
    margin-bottom: 40rpx;
    // padding: 30rpx 32rpx 26rpx 24rpx;
    margin: 15px;
    padding: 15px;
    .title {
      font-size: 30rpx;
      font-weight: 600;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
    .img {
      width: 634rpx;
      height: 258rpx;
      margin-top: 18rpx;
      image {
        width: 634rpx;
        height: 258rpx;
      }
    }
    .info {
      margin-top: 18rpx;
      font-size: 24rpx;
      color: #333;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .foot {
      display: flex;
      margin-top: 16rpx;
      justify-content: space-between;
      .price {
        color: #fe5430;
        // margin-right: 270rpx;
        .num {
          font-size: 32rpx;
          font-weight: 600;
        }
        .month {
          font-size: 20rpx;
        }
      }
      .btn {
        /deep/ {
          .consult-box {
            width: 194rpx;
            height: 42rpx;
            background: linear-gradient(
              309deg,
              rgba(248, 66, 9, 1) 0%,
              rgba(255, 156, 148, 1) 100%
            );
            border-radius: 6rpx;
            line-height: 42rpx;
            text-align: center;
            color: #fff;
            font-size: 20rpx;
          }
        }
      }
    }
  }
}
</style>
